<!--
 * @Description: 表格显示组件
 * @Author: oscar
 * @Date: 2021-12-16 17:33:47
-->
<template>
  <div class="data-table">
    <el-table
      v-loading="loading"
      ref="tableRef"
      :max-height="tableMinHeight()"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        :fixed="tableOptions.checkFixed"
        v-if="tableOptions.canCheck"
        type="selection"
        width="55"
      ></el-table-column>
      <el-table-column
        :fixed="tableOptions.indexFixed"
        v-if="tableOptions.hasIndex"
        type="index"
        width="50"
        label="序号"
      ></el-table-column>

      <el-table-column
          v-for="(item, index) in tableColumnsList"
          :key="item.prop + index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :show-overflow-tooltip="item.overflow"
        >
          <template #default="scope" v-if="item.expandFunc">
            <el-avatar v-if="item.avatar" shape="square" :size="item.avatar" :fit="fit" :src="scope.row[item.prop]"></el-avatar>
            <span
              v-if="item.isMultiCell && item.render"
              v-html="item.render(scope)"
            ></span>
          </template>
        </el-table-column>

      <el-table-column label="操作" fixed="right" width="140">
        <template #default="scope">
          <slot name="op" v-bind:scope="scope"></slot>
        </template>
      </el-table-column>
    </el-table>
    <Page :pages="pages" :total="total" :pageChange="handleCurrentChange"></Page>
  </div>
</template>

<script>
import Page from '@/components/page'
export default {
  name: 'table-component',
  components: {
    Page
  },
  props: {
    loading: {
      type: Boolean,
      default() {
        return false
      }
    },
    tableData: Array,
    tableColumns: Array,
    options: Object,
    pages: {
      type: Object,
      default() {
        return {
          p: 1,
          limit: 10
        }
      }
    },
    total: {
      type: Number,
      default() {
        return 0
      }
    }
  },
  emits: ['pageEvent'],
  setup(props, { emit }) {
    // 获取表格高度
    function tableMinHeight() {
      return (window.innerHeight - 320);
    }

    function handleCurrentChange(val){
      emit('pageEvent', val)
    }

    return {
      tableMinHeight,
      tableColumnsList: props.tableColumns, // 表格的配置数据
      tableOptions: props.options, // 表格属性
      handleCurrentChange
    }
  }
}
</script>